---
title: Installation
description: Démarrez facilement avec RainbowKit
---

# Installation

## Démarrez facilement avec RainbowKit

### Démarrage rapide

Vous pouvez générer une nouvelle application RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) avec l'une des commandes suivantes, en utilisant le gestionnaire de packages de votre choix :

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

Cela vous demandera un nom de projet, générera un nouveau répertoire contenant un projet modèle et installera toutes les dépendances requises.

Alternativement, vous pouvez intégrer manuellement RainbowKit dans votre projet existant.

### Configuration manuelle

Installez RainbowKit et ses dépendances mutationnelles, [wagmi](https://wagmi.sh/), [viem](https://viem.sh), et [@tanstack/react-query](https://tanstack.com/query/v5).

```bash
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```

> Note : RainbowKit est une bibliothèque [React](https://reactjs.org/).

#### Importer

Importez RainbowKit, Wagmi et TanStack Query.

```tsx
import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";
```

#### Configurer

Configurez les chaînes souhaitées et générez les connecteurs nécessaires. Vous devrez également configurer une configuration `wagmi`. Si votre dApp utilise le rendu côté serveur (SSR), assurez-vous de définir `ssr` sur `true`.

> Note : Chaque dApp qui se base sur WalletConnect doit désormais obtenir un `projectId` de [WalletConnect Cloud](https://cloud.walletconnect.com/). Ceci est complètement gratuit et ne prend que quelques minutes.

```tsx line=4-99
...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});
```

#### Envelopper les fournisseurs

Enveloppez votre application avec `RainbowKitProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), et [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider).

```tsx
const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};
```

#### Ajouter le bouton de connexion

Ensuite, dans votre application, importez et affichez le composant `ConnectButton`.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

RainbowKit gérera maintenant la sélection du portefeuille de votre utilisateur, affichera les informations du portefeuille/transaction et gérera le changement de réseau/portefeuille.

#### Configuration supplémentaire des outils de construction

Certaines outils de construction nécessiteront une configuration supplémentaire.

##### Remix

Lorsque vous utilisez [Remix](https://remix.run), vous devez remplir les modules `buffer`, `events` et `http`. Référez-vous à la configuration Remix ci-dessous, ou [à notre projet exemple Remix](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix).

```ts
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};
```

### Préparation au déploiement

Par défaut, votre dApp utilise des fournisseurs RPC publics pour chaque chaîne afin de récupérer les soldes, résoudre les noms ENS, et plus encore. Cela peut souvent causer des problèmes de fiabilité pour vos utilisateurs car les nœuds publics sont limités par leur taux. Vous devriez plutôt acheter un accès à un fournisseur RPC via des services comme [Alchemy](https://www.alchemy.com/) ou [QuickNode](https://www.quicknode.com/), et définir vos propres Transports dans Wagmi. Cela peut être réalisé en ajoutant le paramètre `transports` dans `getDefaultConfig` ou directement via `createConfig` de Wagmi.

Un transport est la couche réseau intermédiaire qui gère l'envoi des requêtes JSON-RPC au fournisseur de nœuds Ethereum (comme Alchemy, Infura, etc.).

**Exemple avec un transport `http`**

```tsx
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});
```

Pour plus de détails, consultez la [documentation transport de wagmi](https://wagmi.sh/core/api/transports#transports).

### Ajoutez vos propres fonctionnalités

Maintenant que vos utilisateurs peuvent connecter leurs portefeuilles, vous pouvez commencer à développer le reste de votre application en utilisant [wagmi.](https://wagmi.sh)

Envoyez des transactions, interagissez avec des contrats, résolvez les détails ENS et bien plus avec la suite complète de React Hooks de wagmi.

Pour plus de détails, consultez la [documentation wagmi.](https://wagmi.sh)

### Autres exemples

Pour voir quelques exemples en cours d'exécution de RainbowKit, ou même les utiliser pour générer automatiquement un nouveau projet, consultez les [exemples officiels](https://github.com/rainbow-me/rainbowkit/tree/main/examples).

Pour essayer RainbowKit directement dans votre navigateur, consultez les liens CodeSandbox ci-dessous :

- avec [Create React App](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- avec [Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- avec [Next.js App Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- avec [Remix](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- avec [Vite](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)
- avec [React Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-react-router)
